.wrapper {
  overflow-y: auto;
  padding: 24px;
}

.main-cont {
  /* height: calc(100% - 146px); */
  width: 100%;
}

.main-cont h4 {
  color: #fff;
  font-size: 24px;
  margin-bottom: 16px;
}

.main-cont .top,
.main-cont .middle,
.main-cont .bottom {
  width: 100%;
  height: calc(100%/3);
  margin-bottom: 16px;
  display: flex;
  /* justify-content: space-around; */
}

.main-cont .top .left {
  width: 85%;
  margin-right: 16px;
  background-color: #4080FF;
  padding: 24px;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}

.main-cont .top .left .item {
  width: 100%;
  height: 100%;
  display: flex;
}


.main-cont .top .left .item .item_every {
  width: calc((100% - 48px)/5);
  height: 80%;
  background-color: #fff;
  padding: 24px;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}

.main-cont .top .left .item .item_every .item_name,
.main-cont .top .right .item .item_every .item_name,
.main-cont .middle .left .item .item_every .item_name,
.main-cont .middle .right .item .item_every .item_name,
.main-cont .bottom .left .item .item_every .item_name,
.main-cont .bottom .right .item .item_every .item_name {
  color: #1D2129;
  /* font-size: 24px; */
  font-size: 16px;
  height: 50%;
  overflow-y: hidden;
  /* white-space: nowrap; */
}

.main-cont .top .left .item .item_every .item_num,
.main-cont .top .right .item .item_every .item_num,
.main-cont .middle .left .item .item_every .item_num,
.main-cont .middle .right .item .item_every .item_num,
.main-cont .bottom .left .item .item_every .item_num,
.main-cont .bottom .right .item .item_every .item_num {
  color: #86909C;
  font-size: 12px;
  height: 50%;

  /* font-weight: 600; */
}

.main-cont .top .left .item .item_every .item_num>span,
.main-cont .top .right .item .item_every .item_num>span,
.main-cont .middle .left .item .item_every .item_num>span,
.main-cont .middle .right .item .item_every .item_num>span,
.main-cont .bottom .left .item .item_every .item_num>span,
.main-cont .bottom .right .item .item_every .item_num>span {
  color: #1D2129;
  font-size: 32px;
}

.main-cont .top .right {
  width: 15%;
  height: 100%;
  background-color: #FFC700;
  padding: 24px;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}

.main-cont .top .right .item {
  width: 100%;
  height: 100%;
}

.main-cont .top .right .item .item_every {
  width: 100%;
  height: 80%;
  background-color: #fff;
  padding: 24px;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}


.main-cont .middle .left {
  color: #fff;
  width: calc(51% - 8px);
  height: 100%;
  margin-right: 16px;
  background-color: #0FC6C2;
  padding: 24px;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}

.main-cont .middle .left .item,
.main-cont .middle .right .item {
  width: 100%;
  height: 100%;
  display: flex;
}

.main-cont .middle .left .item .item_every,
.main-cont .middle .right .item .item_every {
  width: calc((100% - 32px)/3);
  height: 80%;
  background-color: #fff;
  padding: 24px;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}


.main-cont .middle .right {
  color: #fff;
  width: calc(50% - 8px);
  height: 100%;
  background-color: #50CD89;
  padding: 24px;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}


.main-cont .bottom .left {
  color: #fff;
  width: calc((100% -32px)/3);
  height: 100%;
  margin-right: 16px;
  background-color: #7239EA;
  padding: 24px;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}

.main-cont .bottom .left .item,
.main-cont .bottom .right .item {
  width: 100%;
  height: 100%;
  display: flex;
}

.main-cont .bottom .left .item .item_every,
.main-cont .bottom .right .item .item_every {
  width: calc((100% - 16px)/2);
  height: 80%;
  background-color: #fff;
  padding: 24px;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}


.main-cont .bottom .right {
  color: #fff;
  width: calc((100% -32px)/3);
  height: 100%;
  background-color: #B5BDCB;
  padding: 24px;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}